import React, { useEffect } from 'react';
import { InputNumber, Modal, Form, Input, Radio, Select } from 'antd';

import { ICustomer } from '@/services/customer.d'

const { Option } = Select;

interface IProps {
  visible: boolean,
  handleOk: (params: ICustomer) => Promise<void>,
  handleCancel: () => void,
  details: ICustomer,
}

const Edit = (props: IProps) => {

  const { visible, handleOk, handleCancel, details } = props;

  const [form] = Form.useForm();

  useEffect(() => {

    details && details.id && form && form.setFieldsValue(details)
  }, [details, form])



  return (
    <Modal
      visible={visible}
      title={details && details.id ? '修改客户' : '添加客户'}
      okText="确定"
      cancelText="取消"
      onCancel={() => {
        form.resetFields();
        handleCancel();
      }}
      destroyOnClose

      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            const newDatas = { ...details, ...values }

            handleOk(newDatas).then(() => {
              form.resetFields();
            });
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        // layout="vertical"
        name="form_in_modal"
      // initialValues={{
      //   modifier: 'public',
      // }}
      >
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              required: true,
              message: '姓名必填!',
            },
            // {
            //   pattern: /[\u4e00-\u9fa5]/,
            //   message: '姓名只能输入中文!',
            // },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="phone"
          label="手机号"
          rules={[
            {
              required: true,
              message: '手机号必填!',
            },
            {
              pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
              message: '请输入正确的手机号码!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="age"
          label="年龄"
          rules={[
            {
              required: true,
              message: '年龄必填!',
            },
          ]}
        >
          <InputNumber max={100} min={1} />
        </Form.Item>

        <Form.Item name="sex" label="性别" className="collection-create-form_last-form-item">
          <Radio.Group>
            <Radio value="man">男</Radio>
            <Radio value="woman">女</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item name="education" label="学历" className="collection-create-form_last-form-item">
          <Select style={{ width: 120 }}>
            <Option value="博士">博士</Option>
            <Option value="硕士">硕士</Option>
            <Option value="学士">学士</Option>
            <Option value="本科">本科</Option>
            <Option value="专科">专科</Option>
          </Select>
        </Form.Item>




        <Form.Item name="address" label="住址">
          <Input type="textarea" />
        </Form.Item>

      </Form>
    </Modal>
  );
};


export default Edit;
